<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector('#root'))

      class App extends React.Component {
        constructor() {
          super()

          this.state = {
            counter: 100,
            message: 'Hello World',
            names: ['a', 'b', 'c'],

            a: undefined,
            b: null,
            c: true,

            info: {
              name: 'hxl',
              age: 18
            },

            movies: ['流浪地球', '独行月球', '星际穿越']
          }
        }

        render() {
          const { message, counter, names } = this.state
          const { a, b, c } = this.state
          const { info } = this.state

          const { movies } = this.state
          const liEls = movies.map((movie) => <li>{movie}</li>)

          return (
            <div>
              {/* 1.Number/String/Array可以直接显示 */}
              <h2>{counter}</h2>
              <h2>{message}</h2>
              <h2>{names}</h2>

              {/* 2.Undefined/Null/Boolean不会显示 */}
              <h2>{a}</h2>
              <h2>{b}</h2>
              <h2>{c}</h2>

              {/* 3.Object无法显示 */}
              <h2>{info.name}</h2>

              {/* 4.插入表达式 */}
              <h2>{10 + 20}</h2>
              <h2>{info.age >= 18 ? '成年人' : '未成年人'}</h2>

              {/* 5.调用函数显示结果 */}
              <h2>{liEls}</h2>
              <h2>
                {movies.map((movie) => (
                  <li>{movie}</li>
                ))}
              </h2>
            </div>
          )
        }
      }

      root.render(<App />)
    </script>
  </body>
</html>
